.featured-domain-suggestions {
	display: flex;
	flex-direction: column;

	&.featured-domain-suggestions--has-match-reasons .featured-domain-suggestion {
		.domain-registration-suggestion__match-reasons {
			min-height: 26px;
		}
	}

	&.featured-domain-suggestions__is-domain-management .featured-domain-suggestion {
		.domain-suggestion__action {
			font-size: $font-body;
		}
	}

	.is-section-signup & {
		@include breakpoint-deprecated( '>480px' ) {
			flex-direction: row;
		}
	}

	.is-section-domains & {
		@include breakpoint-deprecated( '>800px' ) {
			flex-direction: row;
		}
	}
}

.featured-domain-suggestion {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: 0;
	width: 100%;

	.button.domain-suggestion__action {
		flex-grow: 0;
		margin-left: 0;
		margin-top: 1em;
		text-align: center;
		padding: 0.5em 3em;
		transition: all 0.1s linear;
		width: 100%;

		.is-placeholder & {
			animation: loading-fade 1.6s ease-in-out infinite;
			background-color: var( --color-neutral-0 );
			border: none;
			border-radius: 0;
			color: transparent;
			margin-left: 40px;
			min-height: 26px;
		}
	}

	.domain-suggestion__content {
		display: flex;
		flex-basis: auto;
		flex-direction: column;
		justify-content: flex-start;
		flex-grow: 1;
		margin-top: 0;
	}

	.domain-registration-suggestion__title,
	.domain-registration-suggestion__progress-bar,
	.domain-product-price,
	.domain-registration-suggestion__match-reasons {
		flex: 0 0 auto;
		align-self: flex-start;
		width: 100%;
	}

    .domain-registration-suggestion__title-wrapper .domain-registration-suggestion__title {
        width: auto;
    }

    .domain-registration-suggestion__title {
		font-size: $font-title-small;
		font-weight: 400;
		line-height: 1.2;
		margin-bottom: 0.25em;

		@include breakpoint-deprecated( '>480px' ) {
			font-size: 24px;
			margin-bottom: 0.125em;
		}
	}

	// .card used to increase specificity
	&.card .domain-product-price {
		margin: 0;
		justify-content: flex-start;

		&.is-free-domain,
		&.is-sale-domain {
			small {
				font-size: 0.9em;
			}
		}
	}

	.domain-registration-suggestion__progress-bar {
		align-items: center;
		display: flex;
		font-size: $font-body-extra-small;
		margin-top: 10px;
		order: 2;

		.progress-bar {
			width: 25%;
			margin-right: 1em;
		}
	}

	.domain-registration-suggestion__match-reasons {
		order: 3;
	}

	.domain-registration-suggestion__match-reason {
		color: var( --color-text-subtle );
		font-size: $font-body-extra-small;
		padding: 0.125em 0;
		display: flex;
		align-items: center;

		.gridicon {
			color: var( --color-success );
			margin-right: 0.25em;
		}
	}

	&.is-unavailable {
		.domain-registration-suggestion__progress-bar,
		.domain-registration-suggestion__match-reasons {
			display: none;
		}
	}
}

@include breakpoint-deprecated( '<660px' ) {
	.featured-domain-suggestions {
		flex-flow: wrap;
	}
}

@include breakpoint-deprecated( '>660px' ) {
	.domain-registration-suggestion__title {
		.featured-domain-suggestions--title-in-18em & {
			font-size: 1.8em;
		}
		.featured-domain-suggestions--title-in-16em & {
			font-size: 1.6em;
		}
		.featured-domain-suggestions--title-in-14em & {
			font-size: $font-title-small;
		}
		.featured-domain-suggestions--title-in-12em & {
			font-size: 1.2em;
		}
		.featured-domain-suggestions--title-in-10em & {
			font-size: 1em;
		}
	}

	.featured-domain-suggestions--title-causes-overflow {
		flex-wrap: wrap;

		.featured-domain-suggestion {
			margin-top: 0;
		}
		.featured-domain-suggestion .domain-suggestion__action.button.is-primary {
			width: initial;
		}
	}
}
